@import '../../assets/styles/global';

.house-main {
  background-color: $greyBackgroundColor;
  overflow-x: hidden;
  padding-bottom: 50px;
  position: relative;

  @mixin indication {
    position: absolute;
    top: 42vh;
    // #ifdef APP-PLUS
    top: 34vh;
    // #endif
    @include center;
  }
	
	.carousel{
		position: relative;
	}
	
	.carousel-tap, .carousel-num,.vr{
		position: absolute;
		bottom: 40rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;	
	}
	
	.carousel-num{
		justify-content: flex-end;
	}
	
	.vr{
		justify-content: flex-start;
	}

  .indexTag {
		@include center;
		color: #ffffff;
		margin-right: 30rpx;
		font-size: 14px;
		width: 50px;
		height: 48rpx;
		background-color: rgba(50, 50, 51, 0.6);
		border-radius: 12px;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0px;
  }
  .vr-but{
		@include center;
		width: 93.3rpx;
		height: 46rpx;
		border-radius: 3vw;
		background-color: rgba(245, 245, 245, 0.7);
		border: 1rpx solid $greyBorderColor;
		font-size: 20rpx;
		margin-left: 130rpx;
      }
  .swiper-indicator {	
		position: relative;
		@include center;
		width: 280rpx;
		height: 48rpx;
		background-color: rgba(245, 245, 245, 0.7);
		border: 1rpx solid $greyBorderColor;
		border-radius: 3vw;
		font-size: 20rpx;
		color: #333;
    //transition: all $animationTime linear;
    
    .bar,
    .move-bar {
      @include center;
      border-radius: 3vw;
      width: 93.3rpx;
      height: 100%;
      text {
        @include center;
        width: 100%;
        height: 100%;
        z-index: 5;
      }
    }

    .active {
      color: white;
    }
    .move-bar {
      transition: all 0.1s linear;
      z-index: 1;
      position: absolute;
      //float: left;
      @include blue-transition-effect-background-image;
    }
  }

  .device-header {
    z-index: 1;
    position: absolute;
    width: 100vw;
  }

  .device-status_bar {
    z-index: 1;
    position: fixed;
    background: white;
    width: 100%;
    height: var(--status-bar-height);
  }

  .uni-nav-bar {
    transition: all 0.1s linear;
  }
  .nav-bar-wrapper {
    padding: 0 10px;
    width: 100%;
    @include center;
    justify-content: space-between;
    .nav-circle {
      @include center;
      //margin-top: 15px;
      width: 35px;
      height: 35px;

      border-radius: 50%;

      .whiteBack {
        // 白色返回键
        width: 20px;
        height: 20px;
      }

      .heart {
        // 空心heart
        //margin-top: 12px;
        width: 20px;
        height: 20px;
        @include cover-no-repeat-center;
      }
    }
  }
  .swiper-wrapper {
    white-space: nowrap;
    //height: 300px;

    .swipe-item-image {
      width: 100%;
      //height: 300px;
      @include cover-no-repeat-center;
      background-color: whitesmoke;
    }
  }

  .title-detail-info {
    padding: 15px;
    background-color: white;
    max-height: 600px;
    margin-bottom: 10px;

    .tags-wrapper {
      display: flex;
      height: 37rpx;
      .tag {
        padding: 0 8px;
        max-width: 20vw;
        height: 36rpx;
        background-color: #e45a5a;
        border-radius: 2px;
        @include center;
        color: white;
        font-size: 11px;
        margin-right: 6px;
        //@include ellipsis;
        line-height: 18px;
        @include myEllipsis;
      }
    }

    .houseCard {
      display: flex;
      margin: 15px 0;
      height: 75px;
      box-shadow: 0px 0px 10px 1px #f6f2ea;
      border-radius: 10px;
      position: relative;

      .wrapper-3 {
        position: relative;
        width: 30vw;
        //background-color: orange;
        @include center;
        flex-direction: column;
        padding-top: 15px;

        .api-data {
          max-width: 25vw;
          height: 20px;
          font-size: 14px;
          @include ellipsis;
          color: #06121f;
          margin-bottom: 8px;
        }

        .title-3 {
          max-width: 25vw;
          height: 20px;
          font-size: 12px;
          color: #969799;
        }

        .right-line {
          position: absolute;
          border-right: 1px solid #ebedf0;
          height: 25px;
          top: 25px;
          left: 30vw;
        }
      }
    }

    .left-price {
      max-width: 360rpx;
      @include ellipsis;
      font-size: 32rpx;
      font-weight: bold;
      letter-spacing: 0rpx;
      color: #ff4444;
      display: flex;
			align-items: flex-start !important; 
      height: 38rpx;
      position: relative;
      top: 2px;

      .cn-unit {
        padding-top: 2px;
        font-weight: normal;
        height: 38rpx;
        font-size: 25rpx;
        padding-left: 3rpx;
      }
			.refer{
				width: auto;
			}
    }

    .building-title {
      margin-top: 10px;
      //max-height: 51px;
      width: 100%;
      //@include ellipsis2(2);
      font-size: 18px;
      font-weight: bold;
      letter-spacing: 0px;
      color: #06121f;
    }

    .below-details-title-wrapper {
      display: flex;
      justify-content: space-between;
      align-content: center;
      margin-top: 10px;
      //background-color: yellow;
      .left-price {
        @include center;
      }

      .location-icon-text {
        @include center;
        max-width: 160px;
        @include ellipsis;

        .location-text-wrapper {
          color: $blueBorderColor;
          font-size: 14px;
          height: 20px;
          @include center;
        }
      }
    }

    .title {
      height: 20px;
      font-size: 20px;
      line-height: 20px;
      color: #06121f;
    }

    .building-OR-house-info {
      margin-top: 30px;
    }
  }

  .description,
  .house-remarks-wrapper {
    background-color: white;
    min-height: 168px;
    //height: 217px;
    width: 100vw;
    padding: 15px 8px;
    margin-bottom: 10px;

    .title {
      padding-left: 7px;
      height: 20px;
      font-size: 20px;
      font-stretch: normal;
      line-height: 20px;
      letter-spacing: 0px;
      color: #06121f;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .title-selection {
      white-space: nowrap;
      width: 100vw;
      height: 40px;
      //background-color: red;
      margin-bottom: 10px;

      .select {
        position: relative;
        display: inline-block;
        width: 19vw;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #323233;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin-right: 1vw;

        &:last-child {
          margin-right: 5vw;
        }
      }

      .active {
        position: relative;
        color: #004fbf;

        &:after {
          content: ''; /*CSS伪类用法*/
          position: absolute; /*定位背景横线的位置*/
          bottom: 0;
          background-color: #004fbf; /*宽和高做出来的背景横线*/
          left: 50%;
          margin-left: -13px;
          width: 26px;
          height: 2px;
        }
      }
    }

    .remark-item {
      margin: 0 auto 10px auto;
      width: 91vw;
      //min-height: 11vw;
      @include borderBox;
      background-color: #f7f8fa;
      @include center;
      justify-content: flex-start;
      line-height: 20px;
      padding: 10px 15px;
      color: #323233;

      .logo-part {
        max-height: 70vh;
        overflow: scroll;
        font-size: 14px;
        line-height: 22px;
        color: #323233;
      }
    }
  }

  .description {
    min-height: 0;
    .remark-item {
      text-align: left;
      height: 55vw;
    }
  }
  .merchant-persons-wrapper {
    background-color: white;
    max-height: 426px; // 一个houseMan需要新加68px
    padding: 10px 15px;
    margin-bottom: 10px;

    .title {
      width: 100px;
      height: 20px;
      font-family: PingFangSC-Regular;
      font-size: 20px;
      line-height: 20px;
      color: #06121f;
    }

    .persons-wrapper {
      width: 100%;
      display: flex;
      @include center;
      flex-direction: column;
    }
  }

  .houseRecommend {
    //max-height: 470px;
    background-color: white;
    padding: 15px 15px 0px 15px;

    .no-house-tips {
      height: 150rpx;
      widows: 100%;
      font-size: 28rpx;
      @include center;
      //background-color: yellow;
      color: #aeaeae;
    }
  }
}

.not-loaded {
  .swiper-wrapper {
    margin-bottom: 10vw;
    background-color: whitesmoke;
  }

  .loading-long-bar {
    margin: 2vw 0 2vw 4vw;
    width: 92vw;
    height: 4vw;
    background-color: whitesmoke;
  }

  .half-width {
    width: 46vw;
  }

  .one-third-width {
    width: 30vw;
  }

  .info-wrapper {
    padding-left: 4vw;
    margin-bottom: 10vw;

    @include left;
    .info3 {
      width: 18vw;
      margin-right: 12vw;
      height: 7vw;
      background-color: whitesmoke;
    }
  }

  .two-info {
    display: flex;
  }
}

.appoint-to-see-house {
  transition: all $animationTime;
  width: 27vw;
  height: 35px;
  line-height: 35px;
  position: fixed;
  right: 0px;
  bottom: 100px;
  background-color: #ff4444;
  color: #ffffff;
  border-radius: 20px 0 0 20px;
  font-size: 14px;
  text-align: center;
  @include zIndex5;
}

.appoint-to-see-house > image {
  width: 14px;
  height: 14px;
  position: relative;
  top: 2px;
  margin-right: 5px;
}

.bottom-man {
  padding-bottom: constant(safe-area-inset-bottom);  
  padding-bottom: env(safe-area-inset-bottom); 
  box-sizing: content-box;
  display: flex;
  position: fixed;
  bottom: 0px;
  background-color: #ffffff;
  width: 100%;
  z-index: 10;
  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.13);

  .person-info {
    display: flex;
    flex-direction: column;

    .name {
      position: relative;
      top: 5px;
      max-width: 22vw;
      @include ellipsis;
      height: 5vw;
      font-size: 16px;
      line-height: 4vw;
      letter-spacing: 0vw;
      color: #06121f;
      margin-bottom: 9px;
    }

    .company {
      font-size: 12px;
      color: #969799;
    }
  }

  .bottom-man-profile-photo {
    background-color: whitesmoke;
    border: 2rpx solid grey;
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    margin-right: 10px;
    @include cover-no-repeat-center;
  }

  .ManBut {
    width: 25vw;
    height: 12vw;
    //background-color: red;
    background-color: #ba9d61;
    margin-right: 10px;
    box-shadow: 0vw 1vw 4vw 1vw rgba(186, 157, 97, 0.03);
    border-radius: 2vw;
    color: white;
    @include center;
    font-size: 14px;
  }

  .blue-button-call {
    background-image: linear-gradient(90deg, #2667b9 0%, #0b4daa 100%);
    box-shadow: 0px 4px 14px 3px rgba(16, 95, 196, 0.18);
    border-radius: 6px;
    margin-right: 0;
  }
}

.house-remark {
  border-bottom: 8px solid #f7f8fa;
  border-top: 8px solid #f7f8fa;
  @include borderBox;

  .house-remark-title {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 15px;
    font-size: 20px;
    color: #06121f;
    font-weight: bold;
    /*background-color: red;*/
  }

  .scroll-view-wrapper {
    width: 100vw;
    padding-left: 15px;
    @include borderBox;

    .tabs-wrapper {
      white-space: nowrap; // 滚动必须加的属性
      height: 54px;
      padding-right: 15px;

      .tab-item {
        color: #323233;
        height: 16px;
        width: 56px;
        margin-right: 20px;
        @include center;
        font-size: 14px;

        &:first-child {
          margin-left: 0;
        }

        display: inline-block;
        vertical-align: top;

        .item-title {
          display: block; // 让字体换行
          width: 90%;
          font-size: 30 upx;
          line-height: 40 upx;
        }
      }

      .active-tab {
        color: #004fbf;
      }
    }
  }

  .remarks-wrapper {
    height: 74px;
    padding: 8px 15px 26px;

    .remark-block {
      width: 343px;
      height: 40px;
      background-color: #f7f8fa;
    }
  }
}

.building-source-info-forHouse,
.supporting-info {
  padding: 15px;
  margin-bottom: 10px;

  .info-title {
    margin-top: 0px;
    margin-bottom: 10px;
  }
  .image {
    width: 100%;
    height: 398rpx;
    background-color: whitesmoke;
    margin-bottom: 4vw;
    @include cover-no-repeat-center;
  }
}

.building-source-info,
.supporting-info {
  background-color: white;
  .content-wrapper {
    //display: flex;

    .field {
      //background-color: orange;
      width: 690rpx;
      color: #8c9198;
      font-size: 14px;
      height: 19px;
      margin-bottom: 10rpx;
      @include ellipsis;
      display: inline-block;
      * * {
        width: 100%;
        height: 100%;
      }
    }

    .half-width {
      //background-color: yellow;
      width: 328rpx;
      margin-right: 16rpx;
      word-spacing: -1;
    }
  }
}

.location-periphery {
  background-color: white;
  padding-top: 15px;
  //height: 332px;
  width: 100vw;
  border-bottom: 8px solid $greyBackgroundColor;
  padding-bottom: 25px;

  .info-title {
    padding: 0 15px;
  }

  .map-container {
    height: 53vw;
    //height: 100vw;
    width: 100vw;
    background-color: grey;

    .map-window {
      width: 100vw;
      height: 53vw;
      //height: 100vw;
    }
  }
}

.houseManIcon {
  background-color: #f7f8fa;
  border-radius: 50%;
  margin-right: 15px;
  width: 35px;
  height: 35px;
  line-height: 45px;
  position: relative;
  top: 5px;
}

.houseManIcon > image {
  width: 25px;
  height: 25px;
  position: relative;
  top: 2px;
  left: 5px;
}

.details-wrapper {
  display: flex;
  margin: 10px 0;
  font-size: 14px;
  flex-wrap: wrap;
  color: #969799;

  .field {
    width: 45vw;
    @include ellipsis;
    padding: 5px 0px;
  }
}

.details-wrapper > view {
}

.houseCard > view {
  flex-grow: 1;
  text-align: center;
  font-size: 14px;
}

.houseCard > view > p {
  line-height: 45px;
}

.houseCard > view > text {
  font-size: 12px;
  color: #969799;
  position: relative;
  bottom: 5px;
}

.Tag {
  border: 1px solid #e45a5a;
  color: #e45a5a;
  padding: 1px 10px;
  border-radius: 3px;
  margin-right: 5px;
  font-size: 11px;
}

.Tag:nth-child(1) {
  background-color: #e45a5a;
  color: #ffffff;
}

.title {
  margin: 10px 0px;
  font-size: 18px;
}

// for common use
.info-title {
  font-weight: bold;
  font-size: 20px;
}
